<!--
 * @description: 
 * @Date: 2023-03-07 16:41:47
 * @example: 
 * @params: 
-->
<template>
  
  <div class="nav">
    <div class="btn1">
        <el-button type="primary" round @click="handleStaus()" v-if="isEditDraggable">Save</el-button>
        <el-button type="primary" round @click="handleStaus()" v-else>Edit</el-button>
        
        <el-button type="primary" round @click="dialogVisible = true">Add WIDGET</el-button>
    </div>
    
    </div>
    <div class="home-container-b">

        <div class="drag-body" :class="isEditDraggable ? 'drag-body-edit' : ''">
            <grid-layout :layout.sync="layoutDraggableList"
                         :col-num="90"
                         :row-height="10"
                         :is-draggable="draggableLayout"
                         :is-resizable="resizableLayout"
                         :vertical-compact="true"
                         :use-css-transforms="true">
                <grid-item v-for="item in layoutDraggableList"
                           :static="false"
                           :x="item.x"
                           :y="item.y"
                           :w="item.w"
                           :h="item.h"
                           :i="item.i"
                           style="overflow: auto">

                    <div class="layout-component top-left-first-components"   ref="container"> 
                    <!-- Headline -->
                     <template v-if="item.type == 'headLine'"> 
                        <HeadlineCom 
                                :title="JSON.parse(item.Widget_config).title"
                                :font-size="JSON.parse(item.Widget_config).fontSize" 
                                :text-align="JSON.parse(item.Widget_config).textAlign"
                                :back-ground-col="JSON.parse(item.Widget_config).backGroundCol" 
                                :gradient-color="JSON.parse(item.Widget_config).gradientColor"
                                 class="headline"
                                />
                     </template> 
                    <!-- Slider -->
                    <template v-if="item.type == 'Slider'">
                        <SliderCom
                            :title="JSON.parse(item.Widget_config).title"
                            :silVal="JSON.parse(item.Widget_config).silVal"
                            :vertical="JSON.parse(item.Widget_config).vertical"
                            :unit="JSON.parse(item.Widget_config).unit"
                            :gradientColor="JSON.parse(item.Widget_config).gradientColor"
                            :backtrsprant="JSON.parse(item.Widget_config).BackTrasprant"
                             />
                    </template>
                    <div class="editOrDelbtn" v-if="isEditDraggable">
                        <div class="icon" @click="handleEditlayout(item)"><el-icon color="#3a3a3b"><EditPen /></el-icon></div>
                        <div class="icon" @click="handleCopylayout()"><el-icon color="#3a3a3b"><DocumentCopy /></el-icon></div>
                        <div class="icon" @click="handleDellayout(item.Widget_id)"><el-icon color="#3a3a3b"><CloseBold /></el-icon></div>
                    </div>
       
                    </div>
                </grid-item>
            </grid-layout>
        </div>
    </div>
                <!-- 这里使用component来显示组件。
              <component :is="item.component" style="padding-bottom:20px"></component> -->
    <el-dialog
    v-model="dialogVisible"
    width="50%"
    :show-close="false"
  >  
  <div class="container">
        <div class="type_box" v-for="(item,index) in TypeList " :key="index" @click="handletoConfig(item.typeName)">
            <div class="type_svg"><img :src="item.img" alt=""></div>
            <div class="type_dec">
                 <span class="typetitle">{{item.typeName}}</span>
                 <br>
                 <span class="typedesc">{{ item.typeDesc }}</span>
            </div>
        </div>
  </div>
  </el-dialog>
            <comConfig :title-type="typeName" @handle-update="handleLayoutList()" ref="comConfigRef"/>
</template>
<script setup lang="ts">
import comConfig from './components/ToolComs/comConfig.vue'
import HeadlineCom from './components/ToolComs/Headline/HeadlineCom.vue'
import SliderCom from './components/ToolComs/Slider/SliderCom.vue'
import  http  from "@/views/project/config/index"
import { ElMessage, ElMessageBox } from 'element-plus'
import type { Action } from 'element-plus'
import { ref,watch } from 'vue'
const layoutDraggableList : any = ref([])
const dialogVisible = ref(false)
const draggableLayout = ref(false)
const resizableLayout = ref(false)
/** 编辑状态 */
const isEditDraggable = ref(false)
const typeName = ref("")
const EditValue = ref("")
const comConfigRef = ref()
const TypeList = [
    {
        img:require("../../assets/svg/1.png"),
        typeName:"Boolean",
        typeDesc:"Displays a boolean state(未进行)",
    },
    {
        img:require("../../assets/svg/2.png"),
        typeName:"headLine",
        typeDesc:"Displays a Headline(进行中，编辑)",
    },
    {
        img:require("../../assets/svg/4.png"),
        typeName:"Value",
        typeDesc:"Displays a measurment(未进行)",
    },
    {
        img:require("../../assets/svg/5.png"),
        typeName:"Slider",
        typeDesc:"Displays a Slider(未进行)",
    },
    {
        img:require("../../assets/svg/6.png"),
        typeName:"Image",
        typeDesc:"Displays a staic image(未进行)", 
    },
    {
        img:require("../../assets/svg/8.png"),
        typeName:"Chart",
        typeDesc:"Displays a Chart(未进行)",
    },

]


/** 初始化获取当前组件存在情况 和布局情况 */
const handleLayoutList = async () => {
   const { data : res } = await http.getWidgetList()
   if(res.Code === 200) {
        layoutDraggableList.value = res.data
   }
}
handleLayoutList()

/** Toggle change */
const handleStaus = () => {
    isEditDraggable.value = !isEditDraggable.value
    draggableLayout.value = !draggableLayout.value
    resizableLayout.value = !resizableLayout.value
}

/** 更新组件存在情况 和布局情况  */
const handleUpdateLayout =  async (data) => {
        await http.handleUpdataLayout(data)
}

/** 点击跳转 配置dialog */
const handletoConfig = (e) => {
    typeName.value = e
    comConfigRef.value.handleOpenDialog()
    dialogVisible.value = false
}

/** 编辑widget */
const handleEditlayout = (item) => {
    console.log("编辑widget类型",item.type)
    console.log("编辑val",item.Widget_config)
    typeName.value = item.type
    comConfigRef.value.handleOpenDialog('Edit',item)
}

/**  复制widget */
const handleCopylayout = () => {
    
}
/** 删除Widget */
const handleDellayout = (id) => {
    ElMessageBox.alert('Are you sure to del this widget ?', 'Delete', {
    confirmButtonText: 'OK',
    callback: (action: Action) => {
        if( action === 'confirm'){
            http.handleDelLatout({id}).then((res)=>{
                ElMessage({ message: '删除成功',  type: 'success', })
                handleLayoutList();
        })
        }

    },
  })

}

/** 监听布局状态 */
watch(isEditDraggable,(newVal,oldVal)=>{
    if(!newVal && layoutDraggableList.value.length !== 0){
       layoutDraggableList.value.forEach((item)=>{
            handleUpdateLayout({params:item})
       })
       ElMessage({ message: '修改布局成功！',  type: 'success', })
    }else {
        return
    }
})

/** 监听保存布局 */
</script>
<style scoped lang="less">
.nav {
    display: flex;
    // background-color: red;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 20px;
    // .btn1 {
    //     align-self: flex-end;
    // }
}

  /*----------------拖拽样式开始----------------*/
  .drag-body {
        width: 100%;
        height: 100%;

    }
 
    .layout-component {
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
        // line-height: 100px;
        .editOrDelbtn {
            position: absolute;
            top: 0;
            right: 0;
            display: flex;
            padding: 2px;
            background-color: #cccafb;
            cursor: pointer !important;
            border-bottom-left-radius: 5px;
            .icon {
                margin-left: 3px;
            }
        }
    }
 
    .layout-component-low-warning-second {
        width: 95%;
        height: 100%;
        margin-right: 1%;
        float: left;

    }
 
    .layout-component-low-warning-text {
        width: 4%;
        height: 100%;
        float: right;
    }
 
    .layout-component-low-throwing-second {
        width: 100%;
        height: 100%;
    }
 
    .drag-body-edit {
        .vue-grid-item:not(.vue-grid-placeholder) {
          border-radius: 10px;
          outline: 3px solid #cccafb;
        }
        .vue-grid-layout {
      background: #f3f4f6;
      background-image: url("data:image/svg+xml;utf8,%3Csvg%20viewbox%3D%220%2C%200%2066.41666666666667%2C%2048%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20fill%3D%22%23eee%22%20rx%3D%225%22%20width%3D%2266.41666666666667%22%20height%3D%2248%22%20%2F%3E%3C%2Fsvg%3E");
      background-repeat: repeat;
      background-size: 75px 59px; 
    }
    }
 
    .vue-grid-item {
        box-sizing: border-box !important;
        border-radius: 10px !important;
    }
 

 
    ::v-deep .vue-resizable-handle {
        background: url("@/assets/logo.svg") no-repeat 100% 100%;
        padding: 0 3px 3px 0;
        background-origin: content-box;
        -webkit-box-sizing: border-box;
        position: absolute;
        width: 45px;
        height: 45px;
        bottom: 0;
        right: 0;
    }
 
    .vue-grid-item:not(.vue-grid-placeholder) {
        //border: 1px solid #409eff;
        color: #ffffff;
    }
 
    .vue-grid-item .resizing {
        opacity: 0.9;
    }
 
    .vue-grid-item .static {
        background: transparent;
    }
 
    .vue-grid-item .text {
        font-size: 24px;
        text-align: center;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        height: 100%;
        width: 100%;
    }
 
    .vue-grid-item .no-drag {
        height: 100%;
        width: 100%;
    }
 
    .vue-grid-item .minMax {
        font-size: 12px;
    }
 
    .vue-grid-item .add {
        cursor: pointer;
    }
 
    /*----------------拖拽样式结束----------------*/

    // .nav-wrapper-b {
    //     height: 60px;
    //     line-height: 60px;
    //     width: 100%;
    //     // background: url("~@/assets/image/top.png") no-repeat;
    //     background-size: 100% 100%;
    //     text-align: center;
    //     position: relative;
    //     color: #d5dfe8;
    //     font-family: "黑体";
 
    //     .bar-title-b {
    //         font-size: 32px;
    //         color: #ffffff;
    //         font-weight: bolder;
    //     }
 
    //     .time-b {
    //         position: absolute;
    //         right: 1%;
    //         top: 50%;
    //         transform: translateY(-35%);
    //         font-family: "Time Number";
    //         font-weight: bold;
    //         font-size: 29px;
    //         width: 35%;
    //     }
 
    //     .mapChoose-b {
    //         position: absolute;
    //         left: 22px;
    //         bottom: 15px;
    //         color: #eee;
    //     }
    // }
 
    .home-container-b {

      width: 100%;
        height: 100%;
        position: relative;
        margin-top: 0;
    }
 
    .nav_btn {
        position: absolute;
        top: 5px;
        width: 50%;
        height: auto;
    }
.el-dialog {
    .el-dialog__header {
        padding: 0 !important;
    }
     .el-dialog__body {
        .container {
             display: flex;
             flex-wrap: wrap;
             align-items: center;
             justify-content: center;
             .type_box {
                cursor: pointer;
                box-sizing: border-box;
                padding: 20px;
                margin-left: 15px;
                margin-top: 20px;
                border: 1px solid #d1d5db;
                border-radius: 20px;
                width: 365px;
                height: 80px;
                display: flex;
                align-items: center;
                &:hover{
                    border: 1px solid #9ca3af;
                }
                .type_dec {
                    margin-left: 10px;
                    .typetitle {
                        font-weight: bold;
                    }
                    .typedesc {
                        color: #6b7280;
                    }
                }
             }
        }
     }
}
</style>
